<template>
    <div class="ticket-filter-container">
        <van-dropdown-menu
            :overlay="active !== 0"
            :close-on-click-outside="active !== 2"
        >
            <van-dropdown-item
                @open="open(0)"
                @close="close"
                :title-class="
                    active === 0
                        ? 'all-dropdown-item active'
                        : 'all-dropdown-item'
                "
                title="全部"
                ref="item0"
            >
            </van-dropdown-item>

            <van-dropdown-item
                @open="open(1)"
                @close="close"
                :title-class="active === 1 ? 'active' : ''"
                title="机型"
                ref="item1"
            >
                <van-radio-group v-model="model">
                    <van-cell-group>
                        <div v-for="item in devices" :key="item">
                            <van-cell
                                :title="item"
                                clickable
                                @click="onModel(item)"
                            >
                                <template #right-icon>
                                    <van-radio :name="item" />
                                </template>
                            </van-cell>
                        </div>
                    </van-cell-group>
                </van-radio-group>
            </van-dropdown-item>
            <van-dropdown-item
                @open="open(2)"
                @close="close"
                :title-class="active === 2 ? 'active' : ''"
                title="通话日期"
                ref="item2"
            >
                <div class="date-input-wrapper">
                    <van-field
                        :value="fomatDate(beginTime)"
                        placeholder="起始日期"
                        class="date-input"
                        @click="onBeginTime"
                        @blur="onBeginTimeBlur"
                        readonly
                    />
                    <span class="label">至</span>
                    <van-field
                        :value="fomatDate(endTime)"
                        placeholder="结束日期"
                        class="date-input"
                        @click="onEndTime"
                        @blur="onEndTimeBlur"
                        readonly
                    />
                </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        <DatePicker
            :show="showBeginTimePicker"
            title="选择开始日期"
            :maxDate="endTime ? new Date(endTime) : new Date(2033, 0, 1)"
            @confirm="onBeginTimeConfirm"
            @close="() => (showBeginTimePicker = false)"
        />
        <DatePicker
            :show="showEndTimePicker"
            title="选择结束日期"
            :minDate="beginTime ? new Date(beginTime) : new Date(2013, 0, 1)"
            @confirm="onEndTimeConfirm"
            @close="() => (showEndTimePicker = false)"
        />
    </div>
</template>

<script>
import Vue from "vue";
import {
    DropdownMenu,
    DropdownItem,
    Radio,
    RadioGroup,
    Cell,
    CellGroup,
    Field,
} from "vant";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Field);

import DatePicker from "../date/DatePicker.vue";
export default {
    components: { DatePicker },
    props: {
        tickets: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            active: 0,
            model: 0,
            devices: [],
            beginTime: "",
            endTime: "",
            showBeginTimePicker: false,
            showEndTimePicker: false,
        };
    },
    watch: {
        tickets(newVal) {
            this.getDeviceModels(newVal);
        },
    },
    created() {},
    mounted() {
        this.getDeviceModels(this.tickets);
    },
    methods: {
        open(index) {
            if (index === 0) {
                this.$nextTick(() => {
                    this.$refs.item0.toggle(false);
                });
            }
            if (this.active === index) return;
            this.active = index;
            this.model = 0;
            this.beginTime = "";
            this.endTime = "";
            this.$emit("active", index);
        },
        onBeginTime() {
            this.showBeginTimePicker = true;
        },
        onEndTime() {
            this.showEndTimePicker = true;
        },
        onBeginTimeBlur() {
            this.showBeginTimePicker = false;
        },
        onEndTimeBlur() {
            this.showEndTimePicker = false;
        },
        onBeginTimeConfirm(date) {
            // toLocaleDateString("zh-CN", "yyyy/M/d")
            this.beginTime = date;
            this.showBeginTimePicker = false;
            this.$emit("time", { begin: this.beginTime, end: this.endTime });
        },
        onEndTimeConfirm(date) {
            this.endTime = date;
            this.showEndTimePicker = false;
            this.$emit("time", { begin: this.beginTime, end: this.endTime });
        },
        close() {},
        getDeviceModels(tickets) {
            this.devices = [];
            if (!tickets) return;
            tickets.map((item) => {
                if (!this.devices.includes(item.model)) {
                    this.devices.push(item.model);
                }
            });
        },
        onModel(model) {
            this.model = model;
            this.$emit("model", model);
        },
        fomatDate(date) {
            return date
                ? date.toLocaleDateString("zh-CN", {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                  })
                : "";
        },
    },
};
</script>

<style lang="less" scoped>
.ticket-filter-container {
    width: 100%;
}
</style>
<style lang="less">
.ticket-filter-container {
    .all-dropdown-item {
        color: #323233;
        pointer-events: auto;
    }
    .all-dropdown-item::after {
        display: none;
        pointer-events: auto;
    }
    .van-dropdown-menu__bar {
        box-shadow: none;
        border-bottom: 1px #e7e7e7 solid;
        border-radius: 10px 10px 0 0;
    }
    .van-dropdown-menu__title--active {
        border-bottom: 2px #f00 solid;
        line-height: 48px;
    }
    .active {
        border-bottom: 2px #f00 solid;
        line-height: 48px;
        font-weight: bold;
    }
    .van-dropdown-item__content {
        width: calc(100% - 32px);
        margin-left: 16px;
        border-radius: 0px 0px 10px 10px;
    }
    .date-input-wrapper {
        display: flex;
        width: 100%;
        height: 88px;
        background: #ffffff;
        border-radius: 0px 0px 10px 10px;
        justify-content: space-between;
        padding: 16px 20px;
        box-sizing: border-box;

        .label {
            font-size: 13px;
            font-weight: 400;
            color: #3c4244;
            line-height: 40px;
            display: inline-block;
        }

        .date-input {
            width: 130px;
            height: 40px;
            background: #ebebeb;
            border-radius: 20px;

            input {
                text-align: center;
            }
        }

        @media only screen and (max-width: 320px) {
            flex-direction: column;
            align-items: center;
            padding: 5px;

            .label {
                line-height: 20px;
            }

            .date-input {
                width: 60%;
                padding: 2px;
                min-height: 28px;
            }
        }
    }
}

.van-radio__icon--checked .van-icon {
    background-color: #e8474d;
    border-color: #e8474d;
}
.van-dropdown-menu__title::after {
    border-color: transparent transparent #7e8081 #7e8081;
}
</style>
